<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<!--第一步下载echarts.js引进来-->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
		.outerDIV{
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-content: flex-start;
			width:640px;
			text-align: center; justify-content: center;  align-items: center;
		}

		.outerDIV div{
			width: 200px;
			height: 40px;
			font-size: 16px;
			color: #17c817;
		}

		.summaryTitle {
			height: 32px;
			line-height: 32px;
			width: 200px;
			float: left;
			text-align: center;
		}


		/*
			background: red;*/
    </style>
</head>
<body>

<div class="outerDIV">
	<div>
		行覆盖统计: 90/1276</br>
		方法覆盖统计: 24/478
	</div>
	<div>
		分支覆盖统计: 9/1104</br>
		类覆盖统计: 9/42
	</div>
</div>

<table border="1">
  <tr>
    <th>

<div id="container1title" class="summaryTitle">行覆盖统计: 90/1276</div>
<div id="container1title" class="summaryTitle">方法覆盖统计: 24/478</div>
<div id="container1title" class="summaryTitle">分支覆盖统计: 9/1104</div>
<div id="container1title" class="summaryTitle">行覆盖统计: 90/1276</div>

	</th>
  </tr>
  <tr>
    <td>
	<!---第二步 引进echarts之后，要给它一个容器展示图标的一个空间div。什么名字，宽高等--->
    <div id="container1" style="height: 200px;width:200px;float:left">
    </div>

	</td>
  </tr>
</table>

    <script>
	//第三步 通过echarts.init进行初始化eharts对象
	//mychart是echarts的一个实例   有很多方法
	var chartDom = document.getElementById('container1');
	var myChart = echarts.init(chartDom);
	console.log(echarts);
	console.log(myChart);
	//配置项
	var option = {
		  tooltip: {
			trigger: 'item'
		  },
		  legend: {
			top: '2%',
			left: 'center'
		  },
		  color: ['#bbbdc4', '#64dd59'],// 饼图各块颜色
		  series: [
			{
			  name: '',
			  type: 'pie',
			  radius: ['50%', '70%'],
			  avoidLabelOverlap: false,
			  label: {
				position: 'center',
				show: true,
				formatter:() => {
					let str = '行 '
					return str
				},
				color: '#1E7CE8',
				lineHeight: 16,
				fontSize: 15,
			},
			  emphasis: {
				label: {
				  show: false,
				  fontSize: 20,
				  fontWeight: 'bold'
				}
			  },
			  labelLine: {
				show: false
			  },
			  data: [
				{ value: 90},
				{ value: 10}
			  ]
			}
		  ]
		};
	//把配置项放到echarts对象中来
	option && myChart.setOption(option);
</script>
</body>
</html>
